<template>
  <div class="my-tag">
    <!-- 自定义指令，一开始就聚焦 -->
    <input
      type="text"
      v-if="isShow"
      v-fo
      v-bind:value="value"
      v-on:keyup.enter="ch"
      v-on:blur="looseFos()"
    />
    <span v-on:dblclick="dbFn" v-else>{{ value }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    // 双击显示输入框，并聚焦，有两种方式，一种是 $nextTick ,一种是自定义指令
    dbFn(){
        this.isShow = true
        // vue中dom是异步渲染的
        // this.$nextTick(()=>this.$refs.inpu.focus())
    },
    looseFos() {
      this.isShow = false;
    //   console.log(ids)
      // 向父组件发送消息通知
    //   this.$emit("fn", {id:this.id,tag:this.tag});
    },
    ch(e){
        if(!e.target.value) {
            console.log("输入值有误")
            return
        }
        console.log(e.target.value)
        // 由于父组件是 v-model 所以触发事件是input
        // 回显标签信息是父组件传递过来的
        // v-model实现功能 v-model= :value + @input 
        // 组件内部通过props接收， ：value设置输入框值
        this.$emit("input",e.target.value);
        this.isShow=false
    }
  },
  props: {
    value:String
  },
  // 局部 自定义指令
//   directives:{
//     fos:{
//         inserted(el){
//             el.focus()
//         }
//     }
//   }
};
</script>

<style>
</style>